<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型-内补丁</title>
    <style>
        span{
            width: 200px;
            height: 100px;
            margin-bottom: 10px;
            background-color: lightcoral;
        }
        /*1. 设置padding的四个值,分别代表:上 右 下 左*/
        .d1{
            padding: 10px 8px 6px 4px;
        }
        /*2. 设置padding的三个值,分别代表: 上 左右 下*/
        .d2{
            padding: 10px 6px 4px;
        }
        /*3. 设置两个值,分别代表: 上下 左右*/
        .d3{
            padding: 10px 5px;
        }
        /*4. 设置一个值:分别代表四个方向是一样的*/
        .d4{
            padding: 10px;
        }
    </style>
</head>
<body>
<span class="d1">层一</span>
<span class="d2">层二</span>
<span class="d3">层三</span>
<span class="d4">层四</span>
</body>
</html>